<template>
  <view>
<!--    <view v-if="isOk">-->
<!--      <u-image class="long-img" :src="`${proxyUrl}/static/img-long.jpg`" mode="widthFix" :fade="true" @load="isShow = true">-->
<!--        <view slot="loading" style="width:100vw;height: 100vh;" >-->
<!--          <view style="width:100vw;height: 100vh;display: flex;justify-content: center;align-items: center;" >-->
<!--            <u-loading size="100"></u-loading>-->
<!--          </view>-->
<!--        </view>-->
<!--      </u-image>-->
<!--      <u-button v-if="isShow" style="margin-top: -80rpx" type="warning" shape="square" :ripple="true" size="default" @click="applyFunc" class="custom-btn"-->
<!--                :throttle-time="5000">立即申请借款-->
<!--      </u-button>-->
<!--    </view>-->

    <view class="applyforLoan" >

      <!-- <view class="tabBox">
          <image class="banner4" :src="bannerUrl" style="width: 100%;"></image>
          <view class="tabName">申请借款信息</view>
      </view> -->
      <u-form :model="form" ref="uFormsss">
        <u-form-item label="借款人" label-width="180" prop="riderName" required>
          <u-input v-model="form.riderName" />
        </u-form-item>
        <u-form-item label="骑手ID" label-width="180" prop="riderId" required>
          <u-input v-model="form.riderId" type="number"/>
        </u-form-item>
        <u-form-item label="手机号码" label-width="180" prop="riderPhone" required>
          <u-input v-model="form.riderPhone" placeholder="请输入手机号码" type="number"/>
        </u-form-item>
        <u-form-item label="借款人住址" label-width="180" prop="riderAddress" required>
          <u-input v-model="form.riderAddress" />
        </u-form-item>
        <u-form-item label="身份证号" label-width="180" prop="riderIdNumber" required>
          <u-input v-model="form.riderIdNumber" />
        </u-form-item>

        <u-form-item label="借款用途" label-width="180" prop="reason" required>
          <u-input v-model="form.reason" type="select" :select-open="yongtuShow" @click="yongtuShow = true" placeholder="请选择借款用途" />
        </u-form-item>
        <u-form-item label="借款人类别" label-width="180" prop="loanAttribute" required v-if="form.reason != '垫付车辆租金' && form.reason != '新骑手日维度生活费'">
          <u-input v-model="form.loanAttribute" type="select" :select-open="leibieShow" @click="leibieShow = true"
                   placeholder="请选择借款人类别" />
        </u-form-item>
        <u-form-item label="收款人姓名" label-width="180" prop="payeeName" required v-if="showBankName">
          <u-input v-model="form.payeeName" placeholder="请输入收款人姓名" />
        </u-form-item>
        <u-form-item label="开户银行" label-width="180" prop="bankName" required v-if="showBankName">
          <!--                <u-input type="select" v-model="form.bankName" placeholder="请选择开户银行" @click="showPickerMax1()"></u-input>-->
          <u-input type="text" v-model="form.bankName" placeholder="请输入开户银行" ></u-input>
        </u-form-item>
        <u-form-item label="银行卡账号" label-width="180" prop="bankAccount" required v-if="showBankName">
          <u-input v-model="form.bankAccount" placeholder="请输入银行卡账号" />
        </u-form-item>
        <u-form-item label="借款金额" label-width="180" prop="amount" required>
          <u-input v-if="!isShf" v-model="form.amount" placeholder="请输入借款金额" :disabled="disabledAmount" />
          <u-input v-else v-model="form.amount" type="select" :select-open="shenghuofeiShow" @click="shenghuofeiShow = true" placeholder="请选择借款金额" />
        </u-form-item>
        <u-form-item label="预支工资补差" label-width="180" prop="amount" required  v-if="form.reason == '生活费' && (form.loanAttribute == '专送骑手' || form.loanAttribute == '集约骑手' || form.loanAttribute == '运营干部')">
          <u-input  :value="form.amount * 0.04" placeholder="预支工资补差" disabled />
        </u-form-item>
        <div  v-if="form.reason == '生活费' && (form.loanAttribute == '专送骑手' || form.loanAttribute == '集约骑手')" style="color: red;font-size: 24rpx;margin-top: 10rpx;">提醒：补差金额需提交后支付才能申请成功，审批不通过的补差金额原路退回。</div>
        <u-form-item label="收款人是否本人" label-width="220" prop="isSelf" required v-if="(form.reason == '生活费' || form.reason == '住宿费预支') && form.loanAttribute == '专送骑手'">
          <u-radio-group v-model="form.isSelf"  >
            <u-radio
              v-for="(item, index) in checkboxList" :key="item.name"
              :name="item.value"
              :disabled="item.disabled"
            >
              {{item.name}}
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item label="代领人姓名" label-width="180" prop="substituteName" required v-if="form.isSelf == '0'">
          <u-input v-model="form.substituteName" placeholder="请输入代领人姓名" />
        </u-form-item>
        <u-form-item label="代领人身份证号" label-width="180" prop="substituteNumber" required v-if="form.isSelf == '0'">
          <!--                <u-input type="select" v-model="form.bankName" placeholder="请选择开户银行" @click="showPickerMax1()"></u-input>-->
          <u-input type="text" v-model="form.substituteNumber" placeholder="请输入代领人身份证号" ></u-input>
        </u-form-item>
        <!--      <u-form-item label="与城市经理/主管报备同意截图" :label-position="labelPosition" prop="riderAgreePic" required v-if="form.reason == '生活费' && form.loanAttribute == '运营干部'">-->
        <!--        <u-upload width="160" height="160" max-count="1" :auto-upload="false"-->
        <!--                  @on-choose-complete="riderAgreePicImagesCallback"></u-upload>-->
        <!--      </u-form-item>-->
        <u-form-item label="借款人身份证正面照片" :label-position="labelPosition" prop="riderPictureFront" required>
          <u-upload width="160" height="160" max-count="1" :auto-upload="false"
                    @on-choose-complete="idCardBadgeImagesCallback"></u-upload>
        </u-form-item>
        <u-form-item label="借款人身份证反面照片" :label-position="labelPosition" prop="riderPictureVerso" required>
          <u-upload width="160" height="160" max-count="1" :auto-upload="false"
                    @on-choose-complete="idCardPortraitImagesCallback"></u-upload>
        </u-form-item>
        <u-form-item label="骑手手持身份证照片" :label-position="labelPosition" prop="riderIdcardPic" required>
          <u-upload width="160" height="160" max-count="1" :auto-upload="false"
                    @on-choose-complete="riderIdcardPicImagesCallback"></u-upload>
        </u-form-item>
        <u-form-item label="归属站点" label-width="180" prop="riderDeptName" required>
          <u-input v-model="form.riderDeptName" type="select" @click="showPickerMax($event)" placeholder="请选择归属站点" />
        </u-form-item>
        <u-form-item label="城市负责人" label-width="180" prop="guaName" required v-if="form.reason == '生活费' && form.loanAttribute == '运营干部'">
          <u-input v-model="form.guaName" type="select" :select-open="actionNameShow" @click="selectGuaName()"
                   placeholder="请选择城市负责人" />
        </u-form-item>
        <u-form-item label="担保人" label-width="180" prop="guaName" required v-else>
          <u-input v-model="form.guaName" type="select" :select-open="actionNameShow" @click="selectGuaName()"
                   placeholder="请选择担保人" />
        </u-form-item>
        <!-- <u-form-item label="备注" label-width="180" prop="remarks" required>
            <u-input v-model="form.remarks" placeholder="请输入备注"/>
        </u-form-item> -->
      </u-form>
      <u-button type="primary" shape="square" :ripple="true" size="default" @click="submit" class="custom-btn"
                :throttle-time="5000">提交
      </u-button>
      <u-select v-model="actionNameShow" :list="actionNameList" mode="single-column"
                @confirm="actionNameCallback"></u-select>
      <nui-picker ref="picker" :title="auiPicker.title" :layer="auiPicker.layer" :data="auiPicker.data"
                  @callback="pickerCallback"></nui-picker>
      <u-select v-model="bankNameShow" :list="optionsList" mode="single-column"
                @confirm="bankNameShowCallback"></u-select>
      <u-select v-model="yongtuShow" :list="yongyuList" mode="single-column" @confirm="yongtuCallback"></u-select>
      <u-select v-model="shenghuofeiShow" :list="shenghuofeiList" mode="single-column" @confirm="shenghuofeiCallback"></u-select>
      <u-select v-model="leibieShow" :list="leibieList" mode="single-column" @confirm="leibieCallback"></u-select>
      <!-- <u-modal
              v-model="showModel"
              content="确认提交申请？"
              @confirm="submitData"
              @cancel="cancel"
              show-cancel-button
      ></u-modal> -->
      <u-modal v-model="showModel" :title="title" @confirm="submitBtn" :show-confirm-button="false" @cancel="clear"
               confirmText="提交">
        <view class="slot-content" style="min-height: 430rpx">
          <my-sign @init="onSignInit" @end="endConfirm" ref="mySign" bgColor="#fff" width="100%" :height="signHeight">
          </my-sign>
          <view class="signBtn-box">
            <!-- <view class="signBtn-item1">
                <button type="default" plain="true" class="lnvestor-btn" hover-class="hover"
                    @click="cancelBtn">取消</button>
            </view> -->
            <view class="signBtn-item2">
              <button type="default" plain="true" class="lnvestor-btn2" hover-class="hover" @click="clear">取
                消</button>
              <button type="default" class="lnvestor-btn2" hover-class="hover" @click="submitBtn"
                      :disabled="vsignDisabled">提交签名</button>
            </view>
          </view>
        </view>
      </u-modal>
      <u-toast ref="uToast"></u-toast>
      <u-modal class="xieyiBoxModal" v-model="xieyiModel" :title="'借 款 协 议 书'" @confirm="submitXieyiBtn" @cancel="clear1"
               confirmText="签字提交" show-cancel-button cancelText="取 消">
        <!-- style="height: 930rpx;overflow-y: scroll;" -->
        <view class="slot-content">
          <view class="xieyibox">
            <view class="xieyiitem xieyiitem1">
              <view>出借人(甲方):</view>
              <view>马惠平</view>
              <view>联系方式:</view>
              <view>13802103865</view>
            </view>
            <view class="xieyiitem xieyiitem1">
              <view>借款人(乙方):</view>
              <view>{{ form.riderName }}</view>
              <view>联系方式:</view>
              <view>{{ form.riderPhone }}</view>
            </view>
            <view class="xieyiitem xieyiitem2">
              <view>借款人住址:</view>
              <view>{{ form.riderAddress }}</view>
            </view>
            <view class="xieyiitem xieyiitem2">
              <view>身份证号：</view>
              <view>{{ form.riderIdNumber }}</view>
            </view>
            <view class="xieyiitem xieyiitem3">
              为了保障双方当事人的合法权益，依据《中华人民共和国合同法》及相关法律法规的规定，经甲乙双方友好协商，就乙方向甲方借款事宜达成一致意见，特订立此协议：
            </view>
            <view class="xieyiitem">第一条：</view>
            <view class="xieyiitem xieyiitem2">
              <view>借款用途：</view>
              <view>{{ form.reason }}</view>
            </view>
            <view class="xieyiitem">第二条：借款金额和还款期限</view>
            <view class="xieyiitem">
              1.借款金额：人民币（大写）
              <text>{{ form.amount | filerYuan }}</text>
              元整，人民币（小写）
              <text>{{ form.amount }}元</text>整
            </view>
            <view class="xieyiitem">
              2．借款期限：经双方协商本协议的借款的还款期限为1个月，次月20号还款。
            </view>
            <view class="xieyiitem">
              第三条：双方权利与义务
            </view>
            <view class="xieyiitem">
              1.甲方在本协议签订之日起将上述款项交付乙方，乙方向甲方出具收到此款项之后的借条。
            </view>
            <view class="xieyiitem">
              2.甲方有权不定期向乙方检核款项使用情况，乙方不得将此款项挪作他用。
            </view>
            <view class="xieyiitem">
              3.利息约定：如乙方逾期偿还借款，甲方有权自乙方借款之日起按照中国人民银行同期贷款利率的了两倍计息至还款之日。
            </view>
            <view class="xieyiitem">
              4.乙方委托并授权甲方有权从乙方的配送服务费中予以扣减收取。
            </view>
            <view class="xieyiitem">
              第四条：担保条款
            </view>
            <view class="xieyiitem">
              乙方上述条款的履行由担保人
              <text>{{ form.guaName }}</text>
              身份证号:
              <text>{{ form.guaIdNumber }}</text>
            </view>
            <view class="xieyiitem">
              作为甲方提供乙方借款的担保人。如乙方到期无法偿还，将由担保人代替向甲方支付余下借款，并承担本协议第五条中约定的违约责任。
            </view>
            <view class="xieyiitem">
              第五条：违约责任
            </view>
            <view class="xieyiitem">
              1.乙方不按合法用途使用此项借款，甲方一经发现有权收回全部借款
            </view>
            <view class="xieyiitem">
              2.乙方如逾期不归还借款，乙方应按照借款总额的30%向甲方支付违约金
            </view>
            <view class="xieyiitem">
              3.乙方如逾期不归还借款，乙方应支付甲方向乙方催款所产生的所有交通、食宿费用；
            </view>
            <view class="xieyiitem">
              4.乙方如逾期不归还借款，甲方有权利通过法律途径追回借款，乙方应当承担甲方走法律诉讼所产生支付的诉讼费、财产保全费、律师代理费等相关费用；
            </view>
            <view class="xieyiitem">
              第六条：其他约定
            </view>
            <view class="xieyiitem">
              1.本协议如有未尽事宜，需经协议各方当事人共同协商，另行补充协议，补充协议与本协议具有同等法律效力；
            </view>
            <view class="xieyiitem">
              2.本协议自签订之日起生效；
            </view>
            <view class="xieyiitem">
              3.本协议一式三份，甲方、乙方、担保方各执一份，具有同等法律效力。
            </view>
            <view class="signBtnBox">
              <view class="signItem1">
                <view>甲方签字：</view>
                <view>日期：{{ '' | filtersDate }}</view>
              </view>
              <view class="signItem2">
                <view>乙方签字：</view>
                <view>日期：{{ '' | filtersDate }}</view>
              </view>
              <view class="signItem3">
                <view>担保方签字：</view>
                <view>日期：{{ '' | filtersDate }}</view>
              </view>
              <!-- <image class="jiafang" :src="form.riderSignature"></image> -->
              <image class="yifang" :src="form.riderSignature"></image>
              <image class="danbaofang" :src="form.guaSignature"></image>
            </view>
          </view>
        </view>
      </u-modal>
      <text class="loading-box" v-if="isShowLoading">
        <u-loading mode="circle" size="150" color="#2b85e4"></u-loading>
        <view class="text">正在提交中，请勿退出！</view>
      </text>
      <u-modal v-model="hintShow" :content="hintContent" :cancel-text="'确 定'" :show-confirm-button="false" :show-cancel-button="true"></u-modal>
      <u-modal v-model="show" confirm-text="退出" :show-confirm-button="false"
               title="提示"  @confirm="submitFunc('success')"
      >
        <view class="u-update-content">
          <rich-text style="text-align: center;padding: 30rpx" :nodes="content"></rich-text>
        </view>
      </u-modal>
    </view>
  </view>
</template>
<script>
import { getQueryString } from "@/utils/index.js";
import store from "@/store";
import mySign from './my-sign.vue'
import html2canvas from 'html2canvas'
import { mapGetters } from "vuex";
import { blobToBase64, base64ToBlob } from './file.js'
import nuiPicker from "@/components/picker.vue";
import { compressImg } from '@/utils/compressor/compress.js'
import * as consts from "@/utils/constant.js";
import axios from "axios";
import {getUrlParam} from "../../utils";
import {isEmpty} from "../../utils";
export default {
  data() {
    return {
      proxyUrl:(window.location.href.includes('/xsdcrm-wechat-ui/')?'/xsdcrm-wechat-ui/': ''),
      isShow:false,
      isOk:false,
      show:false,
      content:'未查询到骑手信息，无法申请借款！',
      form: {
        riderOpenid: '',
        riderId: '',
        riderName: '',
        riderPhone: '',
        riderAddress: '',
        riderIdNumber: '',
        riderCity: '',
        amount: '',
        account: '',
        applyTime: '',
        reason: '',
        riderAgreePic: '',
        riderPictureFront: '',
        riderPictureVerso: '',
        riderSignature: '',
        riderDeptId: '',
        riderDeptName: '',
        guaId: '',
        guaName: '',
        guaOpenid: '',
        guaPhone: '',
        guaIdNumber: '',
        guaSignature: '',
        returnTime: '',
        examName: '',
        examTime: '',
        examNo: '',
        status: 0,
        loanAttribute: '',
        payeeName: '',
        bankAccount: '',
        bankName: '',
        remarks: '',
        riderIdcardPic: ''

      },
      rules: {
        riderName: {
          type: 'string',
          required: true,
          message: '请填写借款人姓名',
          trigger: ['blur', 'change']
        },
        riderId: {
          type: 'string',
          required: true,
          message: '请输入骑手id',
          trigger: ['blur', 'change']
        },
        riderPhone: {
          type: 'string',
          required: true,
          message: '请填写手机号码',
          trigger: ['blur', 'change']
        },
        riderAddress: {
          type: 'string',
          required: true,
          message: '请填写借款人住址',
          trigger: ['blur', 'change']
        },
        reason: {
          type: 'string',
          required: true,
          message: '请选择借款用途',
          trigger: ['blur', 'change']
        },
        riderIdNumber: {
          type: 'string',
          required: true,
          message: '请填写身份证号',
          trigger: ['blur', 'change']
        },
        riderDeptName: {
          type: 'string',
          required: true,
          message: '请选择归属站点',
          trigger: ['blur', 'change']
        },
        loanAttribute: {
          type: 'string',
          required: true,
          message: '请选择借款人类别',
          trigger: ['blur', 'change']
        },
        amount: {
          type: 'string',
          required: true,
          message: '请输入借款金额',
          trigger: ['blur', 'change']
        },
        isSelf: {
          type: 'string',
          required: true,
          message: '请选择收款人是否本人',
          trigger: ['blur', 'change']
        },
        substituteName: {
          type: 'string',
          required: true,
          message: '请输入代领人姓名',
          trigger: ['blur', 'change']
        },
        substituteNumber: {
          type: 'string',
          required: true,
          message: '请输入代领人身份证号',
          trigger: ['blur', 'change']
        },
        guaName: {
          type: 'string',
          required: true,
          message: `请选择相关信息`,
          trigger: ['blur', 'change']
        },
        riderAgreePic: {
          type: 'string',
          required: true,
          message: '与城市经理/主管报备同意截图！',
          trigger: ['blur', 'change']
        },
        riderPictureFront: {
          type: 'string',
          required: true,
          message: '请上传借款人身份证正面照片！',
          trigger: ['blur', 'change']
        },
        riderPictureVerso: {
          type: 'string',
          required: true,
          message: '请上传借款人身份证反面照片！',
          trigger: ['blur', 'change']
        },
        riderIdcardPic: {
          type: 'string',
          required: true,
          message: '请上传骑手手持身份证照片！',
          trigger: ['blur', 'change']
        }
      },
      labelPosition: "top",
      actionNameShow: false,
      actionNameList: [],
      zhanNameShow: false,
      zhanNameList: [
        // {
        //     label: '天津工业大学',
        //     value: '1'
        // }
      ],
      auiPicker: {
        title: "选择站点",
        layer: null,
        data: [],
      },
      shenghuofeiShow:false,
      shenghuofeiList: [
        {
          label: '500',
          value: '500'
        },
        {
          label: '1000',
          value: '1000'
        },
        {
          label: '1500',
          value: '1500'
        },
        {
          label: '2000',
          value: '2000'
        }
      ],
      shenghuofeiList1: [    //骑手
        {
          label: '500',
          value: '500'
        },
        {
          label: '1000',
          value: '1000'
        }
      ],
      shenghuofeiList2: [   //干部
        {
          label: '500',
          value: '500'
        },
        {
          label: '1000',
          value: '1000'
        },
        {
          label: '1500',
          value: '1500'
        },
        {
          label: '2000',
          value: '2000'
        }
      ],
      yongtuShow: false,
      yongyuListNew:[
        {
          label: '新骑手日维度生活费',
          value: '1'
        },
        {
          label: '生活费',
          value: '2'
        },
        {
          label: '垫付车辆租金',
          value: '3'
        }
      ],
      yongyuList: [
        {
          label: '新骑手日维度生活费',
          value: '1'
        },
        {
          label: '生活费',
          value: '2'
        },
        {
          label: '垫付车辆租金',
          value: '3'
        }
      ],
      yongyuListZs: [
        {
          label: '新骑手日维度生活费',
          value: '1'
        },
        {
          label: '生活费',
          value: '2'
        },
        {
          label: '垫付车辆租金',
          value: '3'
        },
        {
          label: '住宿费预支',
          value: '4'
        }
      ],
      leibieList: [
        // {
        //     label: '专送骑手',
        //     value: '专送骑手'
        // },
        // {
        //     label: '集约骑手',
        //     value: '集约骑手'
        // },
        // {
        //     label: '运营干部',
        //     value: '运营干部'
        // }
      ],
      // 上传默认图片
      avatarUrl: require('./tupianshangchuantupian.png'),
      bannerUrl: require('./banner.png'),
      // 背景图展示
      imgBg: '',
      imgBg1: '',
      // 背景图预览
      imgBgArray: [],
      imgBgArray1: [],
      // 背景图路径
      imgBgArr: '',
      imgBgAr1: '',
      // 上传的背景临时路径
      imgBgUrl: '',
      // 上传的背景图绝对路径
      imgBgArrUrl: '',
      imgBgArrUrl1: '',
      showModel: false,
      title: '请在空白处签字确认',
      signHeight: '175px',
      vsignDisabled: true,
      disabledAmount: false,
      yongtuValue: '',
      xieyiModel: false,
      str: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx35a73daebf9fccf2redirect_uri=http%3A%2F%2F28h7nb.natappfree.cc%3FdeptId%3D121%0Aresponse_type=codescope=snsapi_userinfostate=STATE#wechat_redirect',
      menuList: {
        "button": [
          {
            "type": "view",
            "name": "注册",
            "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx35a73daebf9fccf2&redirect_uri=http%3A%2F%2Fw4tk26.natappfree.cc%3FdeptId%3D121%0A&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
          },
          {
            "type": "view",
            "name": "借款",
            "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx35a73daebf9fccf2&redirect_uri=http%3A%2F%2Fw4tk26.natappfree.cc%2F%23%2Fpages%2FapplyforLoan%2Findex%0A&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
          }
        ]
      },
      formList: {
        "menu": {
          "button": [
            {
              "type": "view",
              "name": "注册",
              "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx35a73daebf9fccf2&redirect_uri=http%3A%2F%2Fxsdwx.aizwfw.cn%3FdeptId%3D121&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect",
            },
            {
              "type": "view",
              "name": "预支工资",
              "url" : 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx35a73daebf9fccf2&redirect_uri=http%3A%2F%2Fxsdwx.aizwfw.cn%2F%23%2Fpages%2FapplyforLoan%2Findex&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
            },
            {
              "type": "view",
              "name": "担保借款",
              "url" : 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx35a73daebf9fccf2&redirect_uri=http%3A%2F%2Fxsdwx.aizwfw.cn%2F%23%2Fpages%2FloanGuarantee%2FdanbaoList&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
            },
            {
              "type": "view",
              "name": "我的",
              "url" : 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx35a73daebf9fccf2&redirect_uri=http%3A%2F%2Fxsdwx.aizwfw.cn%2F%23%2Fpages%2FloanGuarantee%2FwodeList&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
            }
          ]
        }
      },
      siteItem: {},
      isShowLoading: false,
      leibieShow: false,
      optionsList: [
        {
          label: '交通银行',
          value: '交通银行'
        },
        {
          label: '中国银行',
          value: '中国银行'
        },
        {
          label: '中国建设银行',
          value: '中国建设银行'
        },
        {
          label: '中国农业银行',
          value: '中国农业银行'
        },
        {
          label: '中国工商银行',
          value: '中国工商银行'
        },
        {
          label: '中国邮政储蓄银行',
          value: '中国邮政储蓄银行'
        },
        {
          label: '中国光大银行',
          value: '中国光大银行'
        },+
          {
            label: '中国民生银行',
            value: '中国民生银行'
          },
        {
          label: '招商银行',
          value: '招商银行'
        },
        {
          label: '中信银行',
          value: '中信银行'
        },
        {
          label: '华夏银行',
          value: '华夏银行'
        },
      ],
      bankNameShow: false,
      showBankName: false,
      isShf:false,
      checkboxList: [
        {
          name: '是',
          value:'1',
          checked: false,
          disabled: false
        },
        {
          name: '否',
          value:'0',
          checked: false,
          disabled: false
        },
      ],
      hintShow:false,
      hintContent:'',
      doubleClick:false,
      isDesignatedFlag:null
    }
  },
  watch: {
    // 监听 form.reason 和 form.loanAttribute 的变化
    'form.reason'(newVal, oldVal) {
      this.checkCondition();
    },
    'form.loanAttribute'(newVal, oldVal) {
      this.checkCondition();
    }
  },
  filters: {
    filerYuan(num) {
      //阿拉伯数字转大写，整数转大写
      if (!num) return 0
      const strNum = Number((num + '').replace(/[,，]*/g, '')) + '' // 记录字符
      num = parseInt(Number(strNum)) // 转为整数，
      let capitalAr = '零壹贰叁肆伍陆柒捌玖拾'
      let unitAr = ['拾', '佰', '仟', '万', '拾', '佰', '仟', '亿', '拾', '佰', '仟'] // 单位
      const resultAr = [] // 记录结果，后边json.in就可
      let index = strNum.length - 1 //记录位数
      let idx = 0 // 记录单位
      let percent = 10
      const turnNum = (num, percent, index) => {
        const unit = num / percent
        const capital = capitalAr[Number(strNum[index])]
        if (unit < 1) {
          resultAr.push(capital)
          // 出现11【一十一】这种情况
          if (Number(strNum[index]) === 1 && (strNum.length === 2 || strNum.length === 6 || strNum.length === 10)) {
            resultAr.pop()
          }
          return false //结束递归
        } else {
          if (capital === '零') {
            // 万和亿单位不删除
            if (!['万', '亿'].includes(resultAr[resultAr.length - 1])) {
              resultAr.pop()
            }
            // 前面有零在删掉一个零
            if (resultAr[resultAr.length - 1] === '零') {
              resultAr.pop()
            }
          }
          resultAr.push(capital)
          // 过滤存在【零万】【零亿】这种情况
          if (['万', '亿'].includes(resultAr[resultAr.length - 2]) && capital === '零') {
            resultAr.pop()
          }
          // 过滤【1亿万】这种情况
          if (resultAr[0] === '万' && resultAr[1] === '亿') {
            resultAr.shift()
          }
          // 末尾【零】删掉
          if (resultAr[0] === '零') {
            resultAr.pop()
          }
          resultAr.push(unitAr[idx++])
          turnNum(num, percent * 10, --index)
        }
      }
      turnNum(num, percent, index)
      return resultAr.reverse().join('')
      // console.log(numToCapital(1512345672, 'capital'))
      // 壹拾伍亿壹仟贰佰叁拾肆万伍仟陆佰柒拾贰
    },
    filtersDate() {
      const date = new Date();
      const year = date.getFullYear(); // 获取当前年份，例如：2021
      const month = date.getMonth() + 1; // 获取当前月份，注意需要加1，例如：9
      const day = date.getDate(); // 获取当前日期，例如：22
      return year + '-' + month + '-' + day
    }
  },
  computed: {

    filtersDate() {
      const date = new Date();
      const year = date.getFullYear(); // 获取当前年份，例如：2021
      const month = date.getMonth() + 1; // 获取当前月份，注意需要加1，例如：9
      const day = date.getDate(); // 获取当前日期，例如：22
      return year + '-' + month + '-' + day
    },
    ...mapGetters(["openId"])
  },
  onLoad(option) {
    // 等于null，等于121，显示选择站点
    if (option.type == 'yanzheng') {
      this.getList()
      this.getDeptList()
    } else {
      let source = option.source
      uni.setStorageSync('source',source)
      this.getUser()
    }
  },
  components: {
    mySign,
    nuiPicker
  },
  created() {
    const oScript = document.createElement('script');
    oScript.type = 'text/javascript';
    oScript.src = 'https://res2.wx.qq.com/open/js/jweixin-1.6.0.js';
    document.body.appendChild(oScript);
    oScript.onload = this.wxmini
  },
  mounted() {
    this.$refs.uFormsss.setRules(this.rules)
  },
  methods: {
    applyFunc() {
      this.isOk = false;
      let option = this.$route.query;
      console.log('option',option)
      if (option.type == 'yanzheng') {
        this.getList()
        this.getDeptList()
      } else {
        let source = option.source
        uni.setStorageSync('source',source)
        this.getUser()
      }
    },
    submitFunc() {
      window.close()
    },
    async getList() {
      let query = {
        openid: uni.getStorageSync("openidaa")
      }
      let resss = await this.$api.jiekuan.getUserinfo(query);
      if (!isEmpty(resss.data)) {
        this.form.riderName = resss.data.name;
        this.form.riderPhone = resss.data.phoneNumber;
        this.form.riderIdNumber = resss.data.idCardNo;
        this.form.riderId = resss.data.riderId;
        this.form.riderDeptId = resss.data.deptId;
        this.form.riderDeptName = resss.data.deptName;
        this.form.riderOpenid = uni.getStorageSync("openidaa");
        this.getGuaList(this.form.riderDeptId);
        this.isDesignated(this.form.riderDeptId);
      } else {
        store.commit("UPDATE_ROUTEURL", "/pages/loanGuarantee/yanzheng1");
        // this.show = true
      }
    },
    showPickerMax1() {
      this.bankNameShow = true;
    },
    checkCondition() {
      if (this.form.reason === '生活费' && this.form.loanAttribute === '专送骑手') {
        this.hintContent = '1、符合发放标准后次日发放（国家法定节假日不发放）\n2、咨询电话：17663973260'
        this.hintShow = true
      }
      if (this.form.reason === '生活费' && this.form.loanAttribute === '运营干部') {
        this.hintContent = '1、副站借款额度最高为1000元/月。\n' +
          '2、站长借款额度最高2000元/月。\n' +
          '3、每月6号前提交借款的流程，统一在上月工资中扣除。6-10号不发放，11号开始发放当月预支。'
        this.hintShow = true
      }
    },
    bankNameShowCallback(e) {
      this.form.bankName = e[0].label;
    },
    pickerCallback(e) {
      let data = e.data;
      this.siteItem = data[data.length - 1];
      this.form.riderDeptName = this.siteItem.label;
      this.form.riderDeptId = this.siteItem.id;
      this.getGuaList(this.siteItem.id);
      //流水号 //骑手id
    },
    //选择城市负责人或者担保人
    async selectGuaName(){
      if (isEmpty(this.form.riderDeptId)) {
        uni.showToast({
          title: "请优先选择归属站点后重试",
          icon: "error",
        });
        return
      }
      await this.getGuaList(this.form.riderDeptId);
      this.actionNameShow = true
    },
    //显示picker多级联动弹窗
    showPickerMax(e) {
      this.auiPicker.layer = null;
      this.$refs.picker.open();
    },
    submitXieyiBtn() {
      this.showModel = true;
    },
    async getUser() {
      // this.deptId = option.deptId ? option.deptId : 121;
      // this.code = getQueryString("code");
      let code = getQueryString("code");
      let deptId = 121;
      let res = await this.$api.user.withoutLogin({
        code,
        deptId,
        inductionType: getUrlParam("type")?(getUrlParam("type") == 'operateRegister'?2:1): 1
      });
      uni.setStorageSync("token", res.data.token);
      uni.setStorageSync("openidaa", res.data.openid);
      this.getDeptList();
      let query = {
        openid: res.data.openid
      }
      let resss = await this.$api.jiekuan.getUserinfo(query);
      if (!isEmpty(resss.data)) {
        this.form.riderName = resss.data.name;
        this.form.riderPhone = resss.data.phoneNumber;
        this.form.riderIdNumber = resss.data.idCardNo;
        this.form.riderId = resss.data.riderId;
        this.form.riderDeptId = resss.data.deptId;
        this.form.riderDeptName = resss.data.deptName;
        this.form.riderOpenid = res.data.openid;
        this.getGuaList(this.form.riderDeptId);
        this.isDesignated(this.form.riderDeptId);
      } else {
        store.commit("UPDATE_ROUTEURL", "/pages/loanGuarantee/yanzheng1");
      }
    },
    async getDeptList() {
      let deptId = "0";
      let source = uni.getStorageSync('source')
      let res = await this.$api.notoken.listDeptHtml({ source });
      // let res = await this.$api.notoken.listDeptHtml({ deptId });
      this.auiPicker.data = res.data;
    },
    async getGuaList(id) {
      uni.showLoading({
        title: '加载中...',
        mask: true,
      });
      this.actionNameList = [];
      let res = {}
      if (this.form.reason == '生活费' && this.form.loanAttribute == '运营干部') {
        res = await this.$api.jiekuan.getCityGuaList(id);
        uni.hideLoading();
      } else {
        res = await this.$api.jiekuan.getGuaList(id);
        uni.hideLoading();
      }
      if (isEmpty(res.data)) {
        uni.showToast({
          title: "当前站点无相关数据，请选择其他站点",
          icon: "error",
        });
      }

      res.data.forEach(element => {
        this.actionNameList.push({
          label: element.guaName,
          value: element.guaId,
          guaOpenid: element.guaOpenid,
          guaPhone: element.guaPhone,
          guaIdNumber: element.guaIdNumber
        })
      });
      console.log('this.actionNameList===>>>>',this.actionNameList)
      this.form.guaName = '';
    },
    async isDesignated(deptId) {
      // let deptId = this.form.riderDeptId;
      console.log('this.isDesignated===>>>>',deptId)
      let res = await this.$api.notoken.isDesignated({ deptId });
      this.isDesignatedFlag = res.msg;
      if(this.isDesignatedFlag==1){
        this.yongyuList = this.yongyuListZs
      }else{
        this.yongyuList = this.yongyuListNew
      }
    },
    wxmini(){
      var urlString = encodeURIComponent(location.href.split('#')[0])
      console.log(urlString)
      // 获取密钥
      this.$api.dormitory.getSdk(urlString).then(res=>{
        if (res.code == 300){
          this.wxmini()
        }
        const configData = res.data
        jWeixin.config({ // eslint-disable-line
          // debug: true,
          appId: configData.appid, // 必填，公众号的唯一标识
          timestamp: configData.timestamp, // 必填，生成签名的时间戳
          nonceStr: configData.noncestr, // 必填，生成签名的随机串
          signature: configData.signature,
          jsApiList: ["wx-open-launch-weapp","scanQRCode"], // 必填，需要使用的JS接口列表
          openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
        });

        jWeixin.ready(function () {
          console.log('ready')
        });

        jWeixin.error(function (e) {
          console.log('error',e)
        });
      })
    },
    async saveForm() {
      if (this.doubleClick != false ) return
      this.doubleClick = true
      let rons = await this.$api.jiekuan.submitLoan(this.form);
      if (rons.code == 200) {
        this.$refs.uToast.show({
          type: 'success',
          title: '提交成功'
        })
        let query = {
          ids: [rons.data],
        }
        await this.$api.jiekuan.startAgreement(query);
        this.isShowLoading = false;
        this.vsignDisabled = false;

        if (this.form.reason == '生活费' && (this.form.loanAttribute == '专送骑手' || this.form.loanAttribute == '集约骑手' || this.form.loanAttribute == '运营干部')) {
          let res = await this.$api.jiekuan.createOrderByLivingExpenses({loanId:rons.data,codeId:this.form.amount,openId:uni.getStorageSync("openidaa")}).catch(()=>{this.doubleClick = false});
          jWeixin.chooseWXPay({
            //下面参数要与上面对应
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timeStamp,
            nonceStr: res.data.nonceStr, // 支付签名随机串，不长于 32 位
            package: res.data.packageValue, // 统一支付接口返回的prepay_id参数值
            signType: res.data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
            paySign: res.data.paySign, // 支付签名
            success: async (r) => { //支付成功回调
              console.log('支付成功')
              this.queryOrderLoan(rons.data)
            },
            cancel: function(res) {
              uni.showToast({
                title: '取消支付',
                icon: 'none',
                duration: 2000,
              })
            },
            fail: function(res) {
              console.log("fail", res);
              uni.showToast({
                title: '支付失败',
                icon: 'none',
                duration: 2000,
              })
            }
          });
          this.doubleClick = false
          return
        }
        uni.reLaunch({
          url: `/pages/loanGuarantee/mylist`
        })
      }
    },
    async queryOrderLoan(id) {
      let res = await this.$api.jiekuan.queryOrderLoan({id:id});
      if (res.code ==200 ){
        uni.reLaunch({
          url: `/pages/loanGuarantee/mylist`
        })
      }
    },
    submitBtn() {
      if (!this.vsignDisabled) {
        this.vsignDisabled = true;
        this.isShowLoading = true;
        const _this = this;
        html2canvas(document.querySelector("#mysign")).then(function (canvas) {
          canvas.toBlob(function (blob) {
            let blobs = new Blob([blob], { type: "text/plain;charset=utf-8" });
            let file = new File([blobs], _this.form.riderName + '.jpg', { type: blobs.type })
            _this.uploadPic1(file, "riderSignature");
          });
        })
      }

    },
    // 取消
    cancelBtn() {
      uni.navigateBack({
        delta: 1
      })
    },
    // 清除
    clear() {
      this.signCtx.clear();
      this.showModel = false;
    },
    clear1() {
      this.xieyiModel = false;
    },
    onSignInit(signCtx) {
      this.signCtx = signCtx
    },
    // 绘画结束触发
    endConfirm() {
      this.vsignDisabled = false;
    },
    submitData() {

    },
    cancel() {

    },
    async submit() {
      this.$refs.uFormsss.validate(valid => {
        if (valid) {
          this.xieyiModel = true;
        } else {
          uni.showToast({
            title: '请将信息填写完整！',
            icon: "error",
          });
        }
      });
    },
    actionNameCallback(e) {
      console.log('actionNameCallback====>>>',JSON.stringify(e),e[0].label,)
      this.form.guaName = e[0].label;
      this.form.guaId = e[0].value;
      console.log('this.form====>>>',this.form)
      console.log('this.actionNameList====>>>',this.actionNameList)

      this.actionNameList.forEach(element => {
        if (element.value == e[0].value) {
          this.form.guaOpenid = element.guaOpenid;
          this.form.guaPhone = element.guaPhone;
          this.form.guaIdNumber = element.guaIdNumber;
        }
      })
      this.$forceUpdate();
    },
    shenghuofeiCallback(e) {
      this.form.amount = e[0].value;
    },
    yongtuCallback(e) {
      this.isShf = false;
      this.form.reason = e[0].label;
      this.yongtuValue = e[0].value;
      this.form.loanAttribute = '';
      if (this.form.reason == '新骑手日维度生活费') {
        this.showBankName = false;
        this.form.loanAttribute = '';
        this.form.amount = '500';
        this.disabledAmount = true;
        this.form.payeeName = ''
        this.form.bankName = ''
        this.form.bankAccount = ''
        this.rules.payeeName = {}
        this.rules.bankName = {}
        this.rules.bankAccount = {}
        this.rules.loanAttribute = {}
        this.$refs.uFormsss.setRules(this.rules)
      } else if (this.form.reason == '生活费') {
        this.isShf = true;
        this.form.amount = '';
        this.disabledAmount = false;
        this.leibieList = [
          {
            label: '专送骑手',
            value: '专送骑手'
          },
          {
            label: '集约骑手',
            value: '集约骑手'
          },
          {
            label: '运营干部',
            value: '运营干部'
          }
        ]
        this.rules.loanAttribute = {
          type: 'string',
          required: true,
          message: '请选择借款人类别',
          trigger: ['blur', 'change']
        }
      } else if (this.form.reason == '垫付车辆租金') {
        this.form.amount = '';
        this.disabledAmount = false;
        this.showBankName = false;
        this.form.loanAttribute = ''
        this.form.payeeName = ''
        this.form.bankName = ''
        this.form.bankAccount = ''
        this.rules.payeeName = {}
        this.rules.bankName = {}
        this.rules.bankAccount = {}
        this.rules.loanAttribute = {}
        this.$refs.uFormsss.setRules(this.rules)
      } else if (this.form.reason == '住宿费预支') {
        // this.isShf = true;
        this.form.amount = '';
        this.disabledAmount = false;
        this.leibieList = [
          {
            label: '专送骑手',
            value: '专送骑手'
          }
        ]
        this.rules.loanAttribute = {
          type: 'string',
          required: true,
          message: '请选择借款人类别',
          trigger: ['blur', 'change']
        }
      }
      if (this.form.reason == '生活费' && this.form.loanAttribute == '集约骑手') {
        this.form.amount = '';
        this.disabledAmount = false;
        this.showBankName = true;
        this.rules.payeeName = {
          type: 'string',
          required: true,
          message: '请输入收款人姓名',
          trigger: ['blur', 'change']
        }
        this.rules.bankName = {
          type: 'string',
          required: true,
          message: '请选择开户行银行',
          trigger: ['blur', 'change']
        }
        this.rules.bankAccount = {
          type: 'string',
          required: true,
          message: '请输入银行卡账号',
          trigger: ['blur', 'change']
        }
        this.$refs.uFormsss.setRules(this.rules)
      } else if (this.form.reason == '生活费' && this.form.loanAttribute == '运营干部') {
        this.form.amount = '';
        this.disabledAmount = false;
        this.showBankName = true;
        this.rules.payeeName = {
          type: 'string',
          required: true,
          message: '请输入收款人姓名',
          trigger: ['blur', 'change']
        }
        this.rules.bankName = {
          type: 'string',
          required: true,
          message: '请选择开户行银行',
          trigger: ['blur', 'change']
        }
        this.rules.bankAccount = {
          type: 'string',
          required: true,
          message: '请输入银行卡账号',
          trigger: ['blur', 'change']
        }
        this.$refs.uFormsss.setRules(this.rules)
      } else {
        this.showBankName = false;
        this.form.payeeName = ''
        this.form.bankName = ''
        this.form.bankAccount = ''
        this.rules.payeeName = {}
        this.rules.bankName = {}
        this.rules.bankAccount = {}
        this.$refs.uFormsss.setRules(this.rules)
      }
    },
    leibieCallback(e) {
      this.form.loanAttribute = e[0].label;
      if (this.form.reason == '生活费' && this.form.loanAttribute == '专送骑手') {
        this.shenghuofeiList = this.shenghuofeiList1
      }
      if (this.form.reason == '生活费' && this.form.loanAttribute == '集约骑手') {
        this.showBankName = true;
        this.rules.payeeName = {
          type: 'string',
          required: true,
          message: '请输入收款人姓名',
          trigger: ['blur', 'change']
        }
        this.rules.bankName = {
          type: 'string',
          required: true,
          message: '请选择开户行银行',
          trigger: ['blur', 'change']
        }
        this.rules.bankAccount = {
          type: 'string',
          required: true,
          message: '请输入银行卡账号',
          trigger: ['blur', 'change']
        }
        this.$refs.uFormsss.setRules(this.rules)
        this.shenghuofeiList = this.shenghuofeiList1
      } else if (this.form.reason == '生活费' && this.form.loanAttribute == '运营干部') {
        this.showBankName = true;
        this.rules.payeeName = {
          type: 'string',
          required: true,
          message: '请输入收款人姓名',
          trigger: ['blur', 'change']
        }
        this.rules.bankName = {
          type: 'string',
          required: true,
          message: '请选择开户行银行',
          trigger: ['blur', 'change']
        }
        this.rules.bankAccount = {
          type: 'string',
          required: true,
          message: '请输入银行卡账号',
          trigger: ['blur', 'change']
        }
        this.$refs.uFormsss.setRules(this.rules)
        this.shenghuofeiList = this.shenghuofeiList2
      } else {
        this.showBankName = false;
        this.form.payeeName = ''
        this.form.bankName = ''
        this.form.bankAccount = ''
        this.rules.payeeName = {}
        this.rules.bankName = {}
        this.rules.bankAccount = {}
        this.$refs.uFormsss.setRules(this.rules)
      }
    },
    riderAgreePicImagesCallback(lists) {
      compressImg({
        file: lists[0].file, success: (result) => {
          console.log(result)
          this.uploadPic(result, "riderAgreePic")
        }
      })
    },
    idCardBadgeImagesCallback(lists) {
      compressImg({
        file: lists[0].file, success: (result) => {
          console.log(result)
          this.uploadPic(result, "riderPictureFront")
        }
      })
    },
    idCardPortraitImagesCallback(lists) {
      compressImg({
        file: lists[0].file, success: (result) => {
          console.log(result);
          this.uploadPic(result, "riderPictureVerso")
        }
      })
    },
    riderIdcardPicImagesCallback(lists) {
      compressImg({
        file: lists[0].file, success: (result) => {
          this.uploadPic(result, "riderIdcardPic")
        }
      })
    },
    uploadPic1(file, name) {
      const service = axios.create({
        baseURL: consts.API_BASE_URL,
        timeout: 1000 * 60 * 3,
        headers: {
          "Content-Type": "multipart/form-data",
        },
      });
      service.interceptors.request.use(
        (config) => {
          if (
            config.url.indexOf("withoutLogin") == -1 ||
            config.url.indexOf("bindAndLogin") == -1 ||
            config.url.indexOf("listDept") == -1
          ) {
            let token = uni.getStorageSync("token");
            token && token !== "" && (config.headers.Authorization = "Bearer " + token);
          }
          return config;
        },
        (error) => {
          return Promise.reject(error);
        }
      );

      const formData = new FormData();
      formData.append("file", file);

      uni.showLoading({
        title: "图片上传中，请稍后···",
      });

      service({
        url: "/xsdcrm-wechat-api/common/upload",
        method: "POST",
        data: formData,
      }).then((respon) => {
        let res = respon.data;
        console.log(res)
        uni.hideLoading();
        if (res.code != 200) {
          uni.showToast({
            title: res.msg,
            icon: "error",
          });
          return;
        }
        this.$set(this.form, name, res.fileName);
        this.showModel = false;
        this.saveForm();

      }).catch((err) => {
        uni.hideLoading();
        uni.showToast({
          title: err,
          icon: "error",
        });
      });
    },
    uploadPic(file, name) {
      const service = axios.create({
        baseURL: consts.API_BASE_URL,
        timeout: 1000 * 60 * 3,
        headers: {
          "Content-Type": "multipart/form-data",
        },
      });
      service.interceptors.request.use(
        (config) => {
          if (
            config.url.indexOf("withoutLogin") == -1 ||
            config.url.indexOf("bindAndLogin") == -1 ||
            config.url.indexOf("listDept") == -1
          ) {
            let token = uni.getStorageSync("token");
            token && token !== "" && (config.headers.Authorization = "Bearer " + token);
          }
          return config;
        },
        (error) => {
          return Promise.reject(error);
        }
      );

      const formData = new FormData();
      formData.append("file", file);

      uni.showLoading({
        title: "图片上传中，请稍后···",
      });

      service({
        url: "/xsdcrm-wechat-api/common/upload",
        method: "POST",
        data: formData,
      }).then((respon) => {
        let res = respon.data;
        console.log(res);
        uni.hideLoading();
        if (res.code != 200) {
          uni.showToast({
            title: res.msg,
            icon: "error",
          });
          return;
        }
        this.$set(this.form, name, res.fileName);
      }).catch((err) => {
        uni.hideLoading();
        uni.showToast({
          title: err,
          icon: "error",
        });
      });
    },
    // 选择背景图片
    chooseImg() {
      const _this = this;
      const isIosTrue = uni.getStorageSync('IOS_FIRST_CAMERA')
      if (this.phoneType === 'ios' && isIosTrue !== 'false') {
        // 设为false就代表不是第一次开启相机
        uni.setStorageSync('IOS_FIRST_CAMERA', 'false')
      }
      uni.chooseImage({
        sizeType: "compressed", // 选择图片的数量
        count: 1,
        success: res => {
          _this.imgBg = res.tempFilePaths[0]
          _this.imgBgArray = res.tempFilePaths
          const reader = new FileReader();
          reader.readAsDataURL(res.tempFiles[0]);
          reader.onload = function (e) {
            // e.target.result 即为base64结果
            _this.form.riderPictureFront = e.target.result;
          };

          // const blob = URL.createObjectURL(res.tempFiles[0]);
          // console.log(blob);
          // this.imgBg = res.tempFilePaths[0]
          // this.imgBgArray = res.tempFilePaths
          // console.log(this.imgBg);
          // console.log(this.imgBgArray);
          // blobToBase64(this.imgBg).then(res => {
          //     // 输出图片base64
          //     console.log(res)
          //     // _this.form.riderSignature = res;
          // }).catch(err => {
          //     console.log(err)
          // })
          // this.app_img(0, res)
        },
      })
    },
    chooseImg1() {
      const _this = this;
      const isIosTrue = uni.getStorageSync('IOS_FIRST_CAMERA')
      if (this.phoneType === 'ios' && isIosTrue !== 'false') {
        // 设为false就代表不是第一次开启相机
        uni.setStorageSync('IOS_FIRST_CAMERA', 'false')
      }
      uni.chooseImage({
        sizeType: "compressed", // 选择图片的数量
        count: 1,
        success: res => {
          _this.imgBg1 = res.tempFilePaths[0]
          _this.imgBgArray1 = res.tempFilePaths
          const reader = new FileReader();
          reader.readAsDataURL(res.tempFiles[0]);
          reader.onload = function (e) {
            // e.target.result 即为base64结果
            _this.form.riderPictureVerso = e.target.result;
          };

          // const blob = URL.createObjectURL(res.tempFiles[0]);
          // console.log(blob);
          // this.imgBg = res.tempFilePaths[0]
          // this.imgBgArray = res.tempFilePaths
          // console.log(this.imgBg);
          // console.log(this.imgBgArray);
          // blobToBase64(this.imgBg).then(res => {
          //     // 输出图片base64
          //     console.log(res)
          //     // _this.form.riderSignature = res;
          // }).catch(err => {
          //     console.log(err)
          // })
          // this.app_img(0, res)
        },
      })
    },

    // 图片压缩
    //（这里实际上一开始是要求选择多张图片的，所以将res作为一个数组进行的处理，
    // 后期需求变更,写的比较急，就没改，直接给num传了一个0，默认从数组第一个开始，
    // 然后通过判断数组的length来直接return掉。）
    app_img(num, res) {
      let that = this
      if (Number(num) === Number(res.tempFiles.length)) {
        return
      }
      let index = res.tempFiles[num].path.lastIndexOf(".")
      let img_type = res.tempFiles[num].path.substring(index, res.tempFiles[num].path.length)
      let img_yuanshi = res.tempFiles[num].path.substring(0, index)
      let d2 = new Date().getTime()
      plus.zip.compressImage({
        src: res.tempFiles[num].path,
        dst: img_yuanshi + d2 + img_type,
        quality: 10
      }, function (e) {
        that.imgBgArr = e.target
        that.postImg(that.imgBgArr)
        that.app_img(num + 1, res)
      })
    },

    // 删除图片
    deleteImg() {
      this.imgBg = ''
      this.imgBgAr = ''
      this.imgBgArrUrl = ''
      this.form.riderPictureFront = ''
    },
    deleteImg1() {
      this.imgBg1 = ''
      this.imgBgAr1 = ''
      this.imgBgArrUrl1 = ''
      this.form.riderPictureVerso = ''
    },
    // 点击图片
    bindImg() {
      if (this.imgBgArray.length !== 0) {
        console.log(index)
        uni.previewImage({
          urls: this.imgBgArray,
          current: 0
        })
      }
    },
    bindImg1() {
      if (this.imgBgArray.length !== 0) {
        console.log(index)
        uni.previewImage({
          urls: this.imgBgArray,
          current: 0
        })
      }
    },

    // 上传图片
    postImg(imgFilePaths) {
      console.log(imgFilePaths);
      uni.uploadFile({
        url: baseUrl.apiUrl + '/xxx/xxx',
        filePath: imgFilePaths,
        name: 'file',
        success: (uploadFileRes) => {
          let imgValue = JSON.parse(uploadFileRes.data)
          this.imgBgArrUrl = imgValue.data.absoluteUrl
          this.imgBgUrl = imgValue.data.url
        }
      });
    }

  }
}
</script>
<style lang="scss" scoped>
.applyforLoan {
  padding: 10px;

  .bg-default {
    width: 100px;
    margin: 0 auto;
  }

  .uploadBox {
    width: 100rpx;
    height: 100rpx;
  }

  .my_img {
    width: 100rpx;
    height: 100rpx;
  }

  .add_img_view {
    width: 85%;
    margin: 0 auto;
  }

  .tabBox {
    position: relative;

    uni-image {
      height: 200rpx;
    }

    .tabName {
      color: #fff;
      font-size: 24px;
      margin: 0;
      padding-left: 30px;
      padding-top: 30px;
      position: absolute;
      top: 0;
      left: 80px;
    }
  }

  .u-form {
    padding: 10px;
  }

  .xieyiBoxModal {
    ::v-deep .u-mode-center-box {
      width: 96% !important;
    }

    ::v-deep .u-model__title {
      padding-top: 10px !important;
      padding-bottom: 5px;
      font-weight: bold;
      border-bottom: 1px solid #999999;
    }

    .xieyibox {
      padding: 5rpx;
      height: 100%;
      overflow-y: scroll;

      .xieyiitem {
        margin-top: 7px;

        uni-text {
          display: inline-block;
          border-bottom: 1px solid #999999;
          padding-left: 10px;
          padding-right: 10px;
        }
      }

      .xieyiitem1 {
        display: flex;

        uni-view {
          &:nth-of-type(1) {
            padding-left: 3px;
          }

          &:nth-of-type(3) {
            padding-left: 5px;
          }
        }
      }

      .xieyiitem2 {
        overflow: hidden;

        uni-view {
          float: left;

          &:nth-of-type(1) {
            width: 100px;
          }

          &:nth-of-type(2) {
            width: 230px;
            border-bottom: 1px solid #999999;
            padding-left: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }

      .xieyiitem3 {
        overflow: hidden;
        padding: 3px;

        uni-view {
          float: left;
        }
      }
    }

    .signBtnBox {
      height: 120px;
      overflow: hidden;
      position: relative;

      .signItem1 {
        width: 50%;
        position: absolute;
        top: 20px;
        left: 10px;
        z-index: 50;
      }

      .signItem2 {
        width: 50%;
        position: absolute;
        top: 20px;
        right: 10px;
        z-index: 50;
      }

      .signItem3 {
        width: 50%;
        position: absolute;
        top: 70px;
        left: 10px;
        z-index: 50;
      }

      .jiafang {
        width: 100px;
        height: 60px;
        position: absolute;
        top: 0;
        left: 78px;
        z-index: 20;
      }

      .danbaofang {
        width: 100px;
        height: 60px;
        position: absolute;
        top: 0;
        right: 25px;
        z-index: 20;
      }

      .yifang {
        width: 100px;
        height: 60px;
        position: absolute;
        top: 50px;
        left: 94px;
        z-index: 20;
      }
    }
  }
}

.sign-contain {
  padding-left: 35rpx;
  padding-right: 35rpx;

  .sign-top {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    text-align: center;
    color: #999999;
  }
}

.signBtn-box {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .signBtn-item2 {
    border-top: 1px solid #ccc;
    width: 100%;

    // 按钮样式
    ::v-deep .lnvestor-btn1 {
      width: 200px;
      float: left;
      height: 40px;
      font-size: 16px;
      border: none;
      color: #606266;
      border-radius: 0;
    }

    .lnvestor-btn2 {
      width: 50%;
      float: left;
      border-radius: 20px;
      font-size: 16px;
      height: 40px;
      border: none;
      color: #2979ff;
      border-radius: 0;

      &::after {
        border: none;
        border-left: 1px solid #ccc;
      }
    }

    .hover {
      border: 1px solid #ccc !important;
      color: #ccc !important;
      font-size: 16px !important;
    }
  }
}

.loading-box {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  padding-top: 50%;
  background-color: #00000099;
  z-index: 2000;

  .text {
    margin-top: 10px;
    color: #fff;
  }
}

.long-img /deep/.u-image__loading{
  width:100%;
  height:100vh;
}
</style>
